<template>
  <view class="check-detail pageb">
    <u-cell-group title="" v-if="showCell">
      <template v-for="item in CHECK_DETAIL_FIELDS[checkType]" :key="item">
        <div v-if="Array.isArray(item)" class="check-detail__table-wrapper">
          <div
            v-for="(item1, index) in item"
            :key="index"
            class="check-detail__table-row"
          >
            <div class="check-detail__table-cell">
              {{
                checkData?.value.hasOwnProperty(item1.key)
                  ? checkData?.value[item1.key]
                  : item1.key
              }}
            </div>
            <div class="check-detail__table-cell">
              {{
                checkData?.value.hasOwnProperty(item1.value)
                  ? checkData?.value[item1.value]
                  : item1.value
              }}
            </div>
          </div>
        </div>
        <u-cell
          v-else
          :title="findCheckFields(item)?.title"
          :label="
            findCheckFields(item)?.labelKey
              ? checkData?.value[findCheckFields(item)?.labelKey]
              : ''
          "
          :value="checkData?.value[findCheckFields(item)?.value]"
        >
        </u-cell>
      </template>
    </u-cell-group>
    <u-list @scrolltolower="loadMore" width="100%" v-else>
      <div style="background-color: #fff; padding: 8px">{{ storeName }}</div>
      <uni-table border stripe emptyText="暂无更多数据">
        <uni-tr>
          <uni-th
            v-for="item in CHECK_DETAIL_TABLE[checkType]"
            :key="item.title"
            :width="item.width"
            align="left"
            >{{ item.title }}</uni-th
          >
        </uni-tr>
        <uni-tr v-for="(row, index) in tableDataCom" :key="row.id">
          <uni-td
            v-for="item in CHECK_DETAIL_TABLE[checkType]"
            :key="item.value"
            align="left"
            :width="item.width"
          >
            <span v-if="item.value == 'index'">{{
              index == 0 ? "合计" : index
            }}</span>
            <span v-else>{{ row[item.value] }}</span></uni-td
          >
        </uni-tr>
      </uni-table>
    </u-list>
  </view>
</template>

<script lang="ts" setup>
import { CHECK_TYPE_ENUM } from "@/enum/check";
import { useRequest } from "@/hooks/useRequest";
import { onLoad } from "@dcloudio/uni-app";
import { ref, type Ref, computed, reactive } from "vue";
import {
  CHECK_DETAIL_FIELDS,
  CHECK_DETAIL_REQUEST,
  CHECK_DETAIL_TABLE,
} from "@/constants/check";
import { findCheckFields } from "@/utils/check";
import UniTable from "@/components/uni-table/uni-table.vue";

const checkType = ref<CHECK_TYPE_ENUM | null>(null);
const checkID = ref<null | number>(null);
const checkData = ref<Ref<any | null>>();
const tableData = ref<Ref<any | null>>();
const loadMore = ref<Function>();
const storeName = ref<string>("");

const tableDataCom = computed(() => {
  const data = tableData.value?.value;
  if (!Array.isArray(data)) {
    return [];
  }
  let defaultData = {};
  CHECK_DETAIL_TABLE[checkType.value!].forEach((item: any) => {
    if (item.sum) {
      defaultData[item.value] = 0;
    } else {
      defaultData[item.value] = "-";
    }
  });
  const sumRow = data.reduce((pre, cur) => {
    let obj = {};
    Object.keys(pre).forEach((key) => {
      if (typeof pre[key] === "number") {
        obj[key] = Number(pre[key]) + Number(cur[key]);
      } else {
        obj[key] = "-";
      }
    });
    return obj;
  }, defaultData);
  Object.keys(sumRow).forEach((key) => {
    if (typeof sumRow[key] === "number") {
      sumRow[key] = sumRow[key].toFixed(2);
    }
  });
  return [sumRow, ...data];
});
const showCell = computed(() => {
  const { MEITUAN_FLOWER_ACCOUNT } = CHECK_TYPE_ENUM;
  return MEITUAN_FLOWER_ACCOUNT == checkType.value;
});

onLoad((params) => {
  const { type, id, createDate } = params as {
    type: CHECK_TYPE_ENUM;
    id: string;
    storeName: string;
    verifyStoreName: string;
  };
  checkID.value = Number(id);
  checkType.value = type;

  storeName.value = params?.storeName || params?.verifyStoreName || "";
  console.log(storeName.value)
  let query: string | number = storeName.value;
  if (checkType.value == CHECK_TYPE_ENUM.MEITUAN_FLOWER_ACCOUNT) {
    query = checkID.value;
  }
  // @ts-ignore
  if (showCell.value) {
    const { data } = useRequest(
      [CHECK_DETAIL_REQUEST[checkType.value], query],
      {
        showLoading: true,
      }
    );
    checkData.value = data;
  } else {
    const { data, run } = useRequest(
      [
        CHECK_DETAIL_REQUEST[checkType.value],
        {
          storeName: storeName.value,
          createDate,
        } as any,
      ],
      {
        isPage: true,
        showLoading: true,
      }
    );
    tableData.value = data;
    loadMore.value = run;
  }
});
</script>

<style lang="scss" scoped>
.check-detail ::v-deep .u-cell {
  background-color: #fff;
}

.item {
  position: relative;
  background-color: #fff;
  border-radius: 8px;
  padding: 1px 15px;
  margin-bottom: 15px;
}

.item-line {
  margin: 15px 0;
}

.item-line-label {
  flex: 1;
}

.item-line-value {
  color: $uni-color-subtitle;
  font-size: 14px;
}

.group-desc {
  font-size: 13px;
  padding: 10px 15px;
  color: $uni-color-subtitle;
}

.check-detail__table-wrapper {
  display: flex;
  flex-direction: column;
  padding: 18px;
  margin: 10px;
  border-radius: 10px;
  background: #fff;
}
.check-detail__table-row {
  display: flex;
  justify-content: space-between;
}
.check-detail__table-cell {
  width: 50%;
  text-align: center;
}
</style>
